{% extends 'base.html' %}
{% load static %}

{% block title %}
{{ article.title }}-西湖歌舞几时休
{% endblock %}

{% block meta %}
    <meta name="description" content="{{ article.description }}">
    <meta name="keywords" content="{{ article.keywords }}">
    <meta name="cdn-baidu-search" content='{"autorun":true, "install":true, "keyword": "{{ article.title}}"}'>
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>

    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/m.css' }}"  rel="stylesheet">
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/detail.css' }}"  rel="stylesheet">
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/code.css' }}"  rel="stylesheet">

    <style>
        /* for block of numbers */
        .hljs-ln-numbers {
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;

          text-align: center;
          color: #ccc;
          border-right: 1px solid #CCC;
          vertical-align: top;
          padding-right: 5px;
        }

        .hljs-ln-n {
          width: 30px;
        }

        /* for block of code */
        .hljs-ln .hljs-ln-code {
          padding-left: 10px;
          white-space: pre;
        }
    </style>
{% endblock %}

{% block content %}
    <article>
        <div class="infos" id="article_content">
            <div>
                <span class="intitle">
                    <a class="location">您现在的位置是：</a>
                    <a class="location" href="/">网站首页</a>
                    <a class="location" href="/articles/program">&gt;&nbsp;程序设计</a>&nbsp
                    <a class="location" href="">&gt;&nbsp;{{ article.second_category }}</a>
                </span>

                <div>
                    <h1 class="news_title">{{ article.title }}</h1>
                </div>
                <div class="news_author">
                    <span class="au02">{{ article.date }}</span>
                    <span class="au03">共<b>{{ article.click_num }}</b>人围观</span>
                </div>
                <br>
                <div class="tags">
                    {% for tag in article.tags %}
                        <a href="{% url 'articles:program:tag' %}?tag={{ tag }}" target="_blank">{{ tag }}</a>
                    {% endfor %}

                </div>
                    <div class="news_about"><strong>简介</strong>{{ article.description }}
                </div>

                <div class="news_infos">
                    {{ article.content | safe }}
                </div>
            </div>

            <div class="nextinfo">
                {% if  article_pre.article_id %}
                    <p>上一篇：
                        <a href="{% url 'articles:program:detail' %}{{ article_pre.article_id }}.html">{{ article_pre.title }}</a>
                    </p>
                {% endif %}

                {% if article_next.article_id %}
                    <p>下一篇：
                        <a href="{% url 'articles:program:detail' %}{{ article_next.article_id }}.html">{{ article_next.title }}</a>
                    </p>
                {% endif %}
            </div>
            <div class="otherlink" style="margin-top: 20px;">
                <h2>相关文章</h2>
                {% if list_about %}
                    <ul>
                        {% for article_tag in list_about %}
                            <li>
                                <a href="{% url 'articles:program:detail' %}{{ article_tag.article_id }}.html" target="_blank">{{ article_tag.title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <div>还没有其他相关文章哟~</div>
                {% endif %}
            </div>
            <div style="margin-top:30px; border-top: #000 2px solid;">
                 <form action="/comment/commit" method="POST" enctype="multipart/form-data">
                     {% csrf_token %}
                     <div style="padding-bottom: 30px"></div>
                     {% include "comment.html" %}
                     <input type="submit" style="width:80px; height:30px; margin-top: 10px;" value="发表评论"/>
                     <input name="title" type="text" value="{{ article.title }}" style="float:right; visibility: hidden">
                </form>
            </div>
        </div>
        {% include "comment_list.html" %}
        <script>
            list_comments("{{ article.title }}", "{{ user.id }}");
        </script>
        <br><br>
    </article>

    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();

        /*$("document").ready(function(){
            var img=$("article img");
            for(var i = 0;i < img.length; i++){
                var id = img.get(i).id;
                if (id.length > 0){
                    set_image(id, id, false);
                }
            }
        })*/
    </script>
{% endblock %}




